<!doctype html>
<html class="no-js" lang="">

<head>
    <!-- meta -->
    <meta charset="utf-8">
    <meta name="description" content="Flat, Clean, Responsive, admin template built with bootstrap 3">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <!-- /meta -->

    <title>心秘籍系统</title>



    <!-- core styles -->
    <link rel="stylesheet" href="__ROOT__/Public/asset/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="__ROOT__/Public/asset/css/font-awesome.min.css">
    <link rel="stylesheet" href="__ROOT__/Public/asset/css/animate.min.css">
    <!-- /core styles -->

    <!-- template styles -->
    <link rel="stylesheet" href="__ROOT__/Public/asset/css/style.1.css" id="font">

    <!-- template styles -->
    <link rel="stylesheet" href="__PUBLIC__/css/userQuizReport.css">
    <link rel="stylesheet" href="__PUBLIC__/css/mbti/mbti.css">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="__ROOT__/Public/asset/vendor/modernizr.js"></script>
</head>

<!-- body -->
<body>

<div class="container">
    <header class="col-md-8 col-md-offset-2">
        <div class="title">
            <h2 align="center"><b>MBTI基本分析报告</b></h2>
            <br><br><br>
            <h4 align="center" style="font-family: 微软雅黑;">[美]Myers-Briggs </h4>
        </div>
    </header>
    <div class="col-md-10 col-md-offset-1"><hr/></div>
    <div class="col-md-6 col-md-offset-3"><p align="center">受测者：{$userinfo.username}&nbsp&nbsp&nbsp完成问卷时间：2016-9-22</p></div>
    <div class="col-md-10 col-md-offset-1 menu">
        <table width="100%">
            <tbody>
            <tr><td class="line"><div class="l b">MBTI性格类型简介</div> <div class="r">1</div></td></tr>
            <tr><td class="line"><div class="l b">MBTI图形
            </div> <div class="r">2</div></td></tr>

            <tr><td class="line"><div class="l b">MBTI具体解释</div> <div class="r">4</div></td></tr>

            </tbody>
        </table>
    </div>
    <div class="col-md-10 col-md-offset-1">
        <div class="main-header">MBTI性格类型介绍</div>

        <article>
            <p>人们的性格塑成期通常在青春期，在这之后人们具有了较为稳定的个性类型，并在随后的岁月中动态发展与完善。通常我们觉得随着一个人年龄的增长，他的性格也发生了变化。按照荣格的理论，人的性格一旦成型，就很难发生变化，之所以展现不同的表现方式，正是由于环境、经历等因素的变化，性格在动态地发展，之前不太使用的功能也得到了相应的发挥。如果用左手和右手来做一个比喻的话，一个人的MBTI倾向就是他最熟悉使用的那只手，随着阅历的增加，他也开始练习使用另外一只手。MBTI有四个子量表，分别是：  内倾——外倾（I—E），感觉——直觉（S—N），思维——情感（T—F），判断——知觉（J—P）。</p>
            <b>第一个维度：</b>
            <p>根据个人的能量更集中地指向哪里来区分，分为内倾与外倾两种类型（I—E）。 内倾型的人：独自一个人感到振奋；避免成为注意的焦点；先思考、再行动；在脑中思考；注重隐私、只与少数人共享个人信息；听的比说的多；不把热情表现出来；思考之后再反应，喜欢慢节奏；较之广博喜欢精深。 
                外倾型的人：与他人在一起时感到振奋；希望成为注意的焦点；先行动，再思考；喜欢边想边说出声；易于被了解；愿与人共享个人信息；说的比听的多；热情地交流；反应迅速、喜欢快节奏；较之精深更喜欢广博。</p>
            <b>第二个维度：</b>
            <p>根据个人收集信息的方式不同分为感觉与直觉两种类型（S—N）。 
                感觉型人：相信确定而有形的事物；喜欢具有实际意义的新主意；崇尚现实主义与常识；喜欢运用和琢磨已有的技能；留心特殊的和具体的，喜欢给出细节；循序渐进的给出信息；着眼于现在。直觉型人：相信灵感和推理；喜欢新主意和新概念只出于自己的意愿；崇尚想像力和新事物；喜欢学习新技能，但掌握之后容易厌倦；留心普遍和有象征性的，使用隐喻和类比；跳跃式的以一种绕圈的方式给出信息；着眼于将来。 </p>
            <b>第三个维度：</b>
            <p>根据个人做决定的方式的不同，可分为思维与情感两种类型（T—F）。 
                思维型的人：后退一步，客观地分析问题；崇尚逻辑、公正和公平；有统一标准；自然地发现缺点、有吹毛求疵的倾向；可能被为无情、麻木、漠不关心；认为诚实比机敏更重要；认为只有合乎逻辑的情感才是正确的；受获得成就欲望的驱使。 
                情感型的人：向前看，关心行动给他人带来的影响；注重感情与和睦；看到规则的例外性；自然地想让别人快乐；易于理解别人；可能被视为过于感情化、无逻辑、脆弱；认为诚实与机敏同样重要；认为所有的感情都是正确的，无论有意义与否；受获得被理解的驱使。</p>
            <b>第四个维度：</b>
            <p>根据个人最感到舒适的生活方式，可分为判断与知觉两种类型（J—P）。 判断型的人：做完决定后感到快乐；具有“工作原则”，先工作再玩；确立目标并按时完成任务；想知道自己的处境；着重结果；通过完成任务获得满足；把时间看在有限的资源，认真对待时间限制。 知觉型的人：因保留选择的余地而快乐；具有“玩的原则”，先玩再工作；当有新的情况时便改变目标；喜欢适应新环境；着重过程；通过着手新事物而获得满足；把时间看在无限的资源，认为时间期限是活的。 
                    根据每一项倾向性的判定，最终可以得出十六种组合，如下表所示。这其中的每一种都将是独特的类型，没有哪一种类型最好，也没有哪一种类型不好，要记住的是，这就是你，具有独特风格的你。</p>


            <div class="row">
                <div class="col-md-10 col-md-offset-1">
                    <p align="center"><b>十六种性格类型表</b></p>
                    <table class="table table-bordered table-striped">

                        <tbody>
                            <tr>
                                <td>内倾感觉思维判断 （ISTJ）</td>
                                <td>内倾感觉情感判断 （ISFJ）</td>
                                <td>内倾直觉情感判断 （INFJ）</td>
                                <td>内倾直觉思维判断 （INTJ）</td>
                            </tr>
                            <tr>
                                <td>内倾感觉思维知觉 （ISTP） </td>
                                <td>内倾感觉情感知觉 （ISFP） </td>
                                <td>内倾直觉情感知觉 （INFP）</td>
                                <td>内倾直觉思维知觉 （INTP）</td>
                            </tr>
                            <tr>
                                <td>外倾感觉思维知觉 （ESTP） </td>
                                <td>外倾感觉情感知觉 （ESFP） </td>
                                <td>外倾直觉情感知觉 （ENFP） </td>
                                <td>外倾直觉思维知觉 （ENTP）</td>
                            </tr>
                            <tr>
                                <td>外倾感觉思维判断 （ESTJ） </td>
                                <td>外倾感觉情感判断 （ESFJ） </td>
                                <td>外倾直觉情感判断 （ENFJ）</td>
                                <td>外倾直觉思维判断 （ENTJ）</td>
                            </tr>
                        </tbody>

                    </table>

                </div>

            </div>

        </article>



    </div>
    <div class="col-md-10 col-md-offset-1">
        <div class="main-header">MBTI图形</div>
        <article>
            <div class="row">

                <div class="col-md-10 col-md-offset-1">

                    <table width="791" border="0" cellpadding="10">
                        <tbody><tr>
                            <td width="82"></td>
                            <td width="523" align="center">	<h3  style="font-family: SimHei">原始得分图</h3></td>
                            <td width="118"></td>
                        </tr>
                        <tr>
                            <td>外向（E）</td>
                            <td><div class="graph2" id="one">
                                <strong class="bar" style="width: {$score.EI.row_percent_E}%;"><span>(E){$score.EI.row_percent_E}%</span></strong>					</div>
                                <div class="graph" id="two">
                                    <strong class="bar" style="width: {$score.EI.row_percent_I}%;"><span>(I){$score.EI.row_percent_I}%</span></strong>					</div></td>
                            <td>（I）内向</td>
                        </tr>
                        <tr>
                            <td>实感（S）</td>
                            <td>   <div class="graph2" id="one">
                                <strong class="bar" style="width: {$score.SN.row_percent_S}%;"><span>(S){$score.SN.row_percent_S}%</span></strong>					</div>
                                <div class="graph" id="two">
                                    <strong class="bar" style="width: {$score.SN.row_percent_N}%;"><span>(N){$score.SN.row_percent_N}%</span></strong>					</div></td>
                            <td>（N）直觉</td>
                        </tr>
                        <tr>
                            <td>思考（T）</td>
                            <td>	<div class="graph2" id="one">
                                <strong class="bar" style="width: {$score.TF.row_percent_T}%;"><span>(T){$score.TF.row_percent_T}%</span></strong>					</div>
                                <div class="graph" id="two">
                                    <strong class="bar" style="width: {$score.TF.row_percent_F}%;"><span>(F){$score.TF.row_percent_F}%</span></strong>					</div></td>
                            <td>（F）情感</td>
                        </tr>
                        <tr>
                            <td>判断（J）</td>
                            <td>	<div class="graph2" id="one">
                                <strong class="bar" style="width: {$score.JP.row_percent_J}%;"><span>(J){$score.JP.row_percent_J}%</span></strong>					</div>
                                <div class="graph" id="two">
                                    <strong class="bar" style="width: {$score.JP.row_percent_P}%;"><span>(P){$score.JP.row_percent_P}%</span></strong>					</div></td>
                            <td>（P）知觉</td>
                        </tr>
                        </tbody></table>

                    <table width="774" border="0">
                        <tbody><tr>
                            <td width="103"></td>
                            <td width="542"><div align="center"><h3 class="STYLE3" style="font-family: SimHei">性格倾向明显程度示意图</h3></div></td>
                            <td width="115"></td>
                        </tr>
                        <tr>
                            <td>外向（E）</td>
                            <td>
                                <div class="graph2" id="one">
                                    <strong class="bar" style="width: {$score.EI.percent_E}%;"><span></span></strong>					</div>
                                <div class="graph" id="two">
                                    <strong class="bar" style="width: {$score.EI.percent_I}%;"><span></span></strong>					</div>
                                <br><br></td>
                            <td>（I）内向</td>
                        </tr>
                        <tr>
                            <td>实感（S）</td>
                            <td>
                                <div class="graph2" id="one">
                                    <strong class="bar" style="width: {$score.SN.percent_S}%;"><span></span></strong>					</div>
                                <div class="graph" id="two">
                                    <strong class="bar" style="width: {$score.SN.percent_N}%;"><span></span></strong>					</div>
                                <br><br></td>
                            <td>（N）直觉</td>
                        </tr>
                        <tr>
                            <td>思考（T）</td>
                            <td>
                                <div class="graph2" id="one">
                                    <strong class="bar" style="width: {$score.TF.percent_T}%;"><span></span></strong>					</div>
                                <div class="graph" id="two">
                                    <strong class="bar" style="width: {$score.TF.percent_F}%;"><span></span></strong>					</div>
                                <br><br></td>
                            <td>（F）情感</td>
                        </tr>
                        <tr>
                            <td>判断（J）</td>
                            <td>
                                <div class="graph2" id="one">
                                    <strong class="bar" style="width: {$score.JP.percent_J}%;"><span></span></strong>					</div>
                                <div class="graph" id="two">
                                    <strong class="bar" style="width: {$score.JP.percent_P}%;"><span></span></strong>					</div>
                                <br><br></td>
                            <td>（P）知觉</td>
                        </tr>

                        <tr>
                            <td height="34"></td>
                            <td style="background:url(/lee/images/dibiao1.jpg) no-repeat"></td>
                            <td></td>
                        </tr>
                        </tbody></table>

                </div>

            </div>

        </article>
    </div>
    <div class="col-md-10 col-md-offset-1">
        <div class="main-header">MBTI具体解释</div>
    </div>

    <div class="col-md-10 col-md-offset-1">
        <article><h3>你的类型是：<b>{$desc.corr_flock}</b></h3></article>
      <article>  <p>{$desc.reg_desc}</p></article>
    </div>

</div>

</body>
<script src="__ROOT__/Public/asset/vendor/jquery-1.11.1.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="__ROOT__/Public/asset/bootstrap/js/bootstrap.js"></script>
<script>

    $(document).ready(function(){

        //alert($(".section_score:eq(0)").find('span:eq(1)').html());

        var section_score_level1 = [];
        var section_score_level2 = [];

        for (var $i = 0; $i < 16; $i++){
            section_score_level1[$i] = parseInt($.trim($(".section_score_level1:eq("+$i+")").find('span:eq(1)').text()));
        }

        for ($i = 0; $i < 8; $i++){
            section_score_level2[$i] = parseInt($.trim($(".section_score_level2:eq("+$i+")").find('span:eq(1)').text()));
        }

        console.log(section_score_level2);

    });




</script>


